<script setup>
import {TsisShow,PicCateAllList} from '@/hooks/Picker'
import { reactive, ref } from 'vue';
import {getSercomplaineCho,getSercomplainModify} from '@/api/Sercomplain'
import SwyQuill from '../../../components/ZXSimg/SwyQuill'
import ZXSimg from '../../../components/ZXSimg'
const  cateList=PicCateAllList()
const complainRef=ref()
const emit=defineEmits(['updateList'])
const changeInput = (val)=>{
  queryData.reply = val
}
const queryData=reactive({
  community_code:'',
  title:'',
  tel:'',
  status:'',
  reason:'',
  is_anonymity:0,
  an_photo:'',
  reply:'',
  id:null
})
const complainClose=()=>{
  TsisShow.value=false
  complainRef.value.resetFields()
  Object.assign(queryData,{
    community_code:'',
  title:'',
  tel:'',
  status:'',
  reason:'',
  is_anonymity:0,
  an_photo:'',
  reply:'',
  id:null
  })
}
const activeName=ref('first')
const EchoComplaints=async (id)=>{
  let {data}=await getSercomplaineCho(id)
  Object.assign(queryData,data)
}
// 确定
const onSearCh=async ()=>{
try {
  await complainRef.value.validate()
  let res=await getSercomplainModify(queryData)
  emit('updateList')
  TsisShow.value=false
} catch (error) {
  
}
}

// 校验
const formRules={
  is_anonymity:[{required: true, message: "请选择", trigger: "blur" }],
  reply:[{required: true, message: "请选择", trigger: "blur" }]
}




// 外传
defineExpose({
  EchoComplaints
})
</script>
<template>
  <div>
    
    <el-drawer v-model="TsisShow" title="回复投诉" size="50%" style="position: relative;" @close="complainClose">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="投诉内容" name="first">
      <el-form :model="queryData" :inline="true" class="demo-form-inline" label-position="top">
        <el-form-item label="所属小区" >
        <el-select  placeholder="请输入" v-model="queryData.community_code" clearable style="width: 325px;" disabled>
          <el-option v-for="item in cateList" :key="item.id" :label="item.name" :value="item.code"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="投诉名称">
        <el-input style="width: 325px;"  placeholder="请输入" clearable v-model="queryData.title" disabled></el-input>
      </el-form-item>
        <el-form-item label="联系方式">
        <el-input style="width: 325px;"  placeholder="请输入" clearable v-model="queryData.tel" disabled></el-input>
      </el-form-item>
      <el-form-item label="是否匿名">
      <el-radio-group v-model="queryData.status" class="ml-4" style="width: 325px;" disabled>
          <el-radio :label="0" size="large">不匿名</el-radio>
          <el-radio :label="1" size="large">匿名</el-radio>
        </el-radio-group>
    </el-form-item>
      <el-form-item label="投诉事由" disabled>
       <template #default="{row}">
        <!-- {{ row }} -->
        <el-text class="mx-1" style="width: 700px;">{{ queryData.reason }}</el-text>
      </template>
      </el-form-item>
    <el-form-item label="图片" >
     
      <div class="demo-image__preview">
      <el-image style="width: 100px; height: 100px" :src="`http://124.223.14.236:8881${queryData.an_photo}`" :zoom-rate="1.2"
       :preview-src-list="[`http://124.223.14.236:8881${queryData.an_photo}`]" :initial-index="99" :z-index="9999" fit="cover"
       :preview-teleported="true" />
     </div>
   
    </el-form-item>
      
            </el-form>
    </el-tab-pane>
    <el-tab-pane label="回复信息" name="second">
      <el-form :model="queryData" :inline="true" class="demo-form-inline" label-position="top" ref="complainRef" :rules="formRules">
    <el-form-item label="处理状态" prop="is_anonymity">
      <el-radio-group v-model="queryData.is_anonymity" class="ml-4" style="width: 325px;">
          <el-radio :label="0" size="large">待受理</el-radio>
          <el-radio :label="1" size="large">已受理</el-radio>
          <el-radio :label="2" size="large">已维修</el-radio>
        </el-radio-group>
    </el-form-item>
    <el-form-item label="回复图片">
     
      <ZXSimg v-model="queryData.an_photo"/>
    </el-form-item>
    <el-form-item label="报修回复" prop="reply">
      <SwyQuill :value="queryData.reply" :min-height="192" @update:input="changeInput"></SwyQuill>
    </el-form-item>
            </el-form>
    </el-tab-pane>
  </el-tabs>

          <span style="position: absolute; bottom: 30px;right:20px;">  <el-button @click="TsisShow=false">取消</el-button>
            <el-button type="primary" @click="onSearCh">确定</el-button></span>
  </el-drawer>
  </div>
</template>
<style lang="scss" scoped>
.demo-image__error .image-slot {
 font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
 font-size: 30px;
}

.demo-image__error .el-image {
 width: 100%;
 height: 200px;
}
</style>